<template>
  <div class="dish-operate">
    <el-row style="display: flex;justify-content: center">
<!--        <el-col :span="6" :offset="2">-->
        <el-button size="mini" type="primary" @click="reduceNum">-</el-button>
<!--        </el-col>-->
<!--      <el-col :span="6" :offset="1">-->
        <el-input v-model="number" v-if="number" size="mini" @blur="createDishItem"></el-input>
<!--      </el-col>-->
<!--      <el-col :span="7" :offset="2">-->
        <el-button size="mini" type="primary" @click="addNum">+</el-button>
<!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
  import {mapActions,mapState} from 'vuex'
  import seats from '../../../store/frontModules/cf/seats';
  export default {
    name: "DishOperate",
    props: ['dish','seatnum'],
    data(){
      return {
        number: 0,
      }
    },
    methods: {
      ...mapActions('dishes/',['myMenuAC']),
      ...mapActions('bills/',['changedishesAC']),
      addNum() {
        this.number++
        this.createDishItem()
      },
      reduceNum() {
        if (this.number>0){
          this.number--
          this.createDishItem()
        } else {
          this.$message.info('菜品已经不能再减少了')
        }
      },
      createDishItem(){
        let dish ={
          id: this.dish.id,
          name: this.dish.name,
          number: parseInt(this.number),
          seatNum: this.seatnum,
          price: this.dish.price
        }
        this.changedishesAC(dish)
      }
    },
    created() {
      // this.seatnum = parseInt(this.$router.currentRoute.params.seatnum)
      // console.log('菜单操作seatnum',this.seatnum)
      // if (parseInt(this.$router.currentRoute.params.seatnum))
    }
  }
</script>

<style lang="less" scoped>
.dish-operate {
  .op {
    /*width: 80%;*/
  }
}
</style>